<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        3.加入节流后的输入：
        <input type="text" name="throttle" id="throttle">
    </div>
    <script>
        /* 
        (1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

        (2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；

        (3)监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；
        */
        let inputThrottle = document.getElementById('throttle')

        function throttle(fun, delay) {
                let last, time = null // 求最后一次input的时间
                return function () {
                    let that = this;
                    let _args = arguments;

                    let now = +new Date();

                    if (last && now < last + delay) {
                        clearTimeout(time);
                        time = setTimeout(function () {
                            last = now;
                            fun.apply(that, _args);
                        }, delay)
                    } else {
                        last = now;
                        fun.apply(that, _args);
                    }
                }
            }
            // 模拟Ajax发请求
            function ajax(content) {
                    console.log('ajax request ' + content)
            }
            // 闭包
            let throttleAjax = throttle(ajax, 1000)
            inputThrottle.addEventListener('input', function (e) {
                throttleAjax(e.target.value)
            })
    </script>

</body>
</html>